<template>
	<view class="editPassword">
		<view class="main-info problem-info">
			<view class="flex-between-center avatar-box">
				<view class="info-label">用户头像:</view>
				<!-- #ifdef MP-WEIXIN -->
				<button hover-class="none" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
				  <u-image border-radius="50%" width="120" height="120" :src="form.avatar || require('../../static/img/common/avatar.png')"></u-image>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-image border-radius="50%" width="120" height="120" :src="form.avatar || require('../../static/img/common/avatar.png')" @tap="chooseAvatar"></u-image>
				<!-- #endif -->
			</view>
			<view class="flex-between-center">
				<view class="info-label">用户昵称:</view>
				<u-input v-model="form.nickName" type="nickname" placeholder="请输入昵称" :customStyle="{textAlign: 'right'}"/>
			</view>
			<view class="flex-between-center">
				<view class="info-label">ID号:</view>
				<u-input :disabled="true" v-model="form.id" maxlength="50" type="text" placeholder="-" :customStyle="{textAlign: 'right'}"/>
			</view>
			<view class="flex-between-center">
				<view class="info-label">手机号码:</view>
				<u-input :disabled="true" v-model="form.phone" maxlength="11" type="text" placeholder="-" :customStyle="{textAlign: 'right'}"/>
			</view>
			<view class="flex-between-center" v-if="form.idCard">
				<view class="info-label">身份证号:</view>
				<u-input :disabled="true" v-model="form.idCard" type="text" placeholder="-" :customStyle="{textAlign: 'right'}"/>
			</view>
			<view class="flex-between-center" v-if="form.sexCode">
				<view class="info-label">性别:</view>
				<u-input :disabled="true" :value="form.sexCode==1?'女':'男'" type="text" placeholder="-" :customStyle="{textAlign: 'right'}"/>
			</view>
		</view>
		<view class="logoff-btn">
			<u-button shape="circle" :ripple="true" @click="$common.navigator('/pagesA/setting/accountCancellation')" type="error" :custom-style="{background:'rgba(245,56,49,0.04)',color:'#F53831',fontSize:'28rpx',fontWeight:'bold',width:'100%',height:'90rpx',letterSpacing: '8rpx'}">注销账户</u-button>
		</view>
		<view class="footer-btn">
			<u-button shape="circle" @click="submitForm" type="primary" :custom-style="{background:'#3385FF',fontSize:'32rpx',fontWeight:'bold',width:'100%',height:'90rpx',letterSpacing: '8rpx'}">确认保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: uni.getStorageSync('userInfo')
			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.baseUrl+'/common/upload',
					header:{
						Authorization: uni.getStorageSync('token'),
					},
					filePath: path,
					name: 'file',
					complete: (res) => {
						this.form.avatar = JSON.parse(res.data).url
					}
				});
			})
		},
		onLoad() {
			
		},
		methods: {
			submitForm(){
				uni.showLoading()
				this.$request({
					url: '/loginUserInfo/updateInfo',
					method: 'post',
					data:this.form
				}).then(response => {
					if(response.code==200){
						this.$store.commit('SET_USERINFO',this.form)
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						setTimeout(()=>{
							this.$common.navigateBack();
						},1200)
					}
				})
			},
			onChooseAvatar(e) {
			    console.log(e)
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			previewImage(img){
				uni.previewImage({
					current:0,
					urls: [img]
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.editPassword {
		padding: 24rpx 24rpx 140rpx;
		.main-info{
			>view{
				background-color: #fff;
				height: 100rpx;
				padding: 0 24rpx;
				margin-bottom: 24rpx;
				border-radius: 24rpx;
				&.avatar-box{
					height: auto;
					padding: 24rpx;
					button{
						background-color: transparent;
						padding: 0;
						margin: 0;
						&:after{
							border: 0;
						}
					}
				}
				.info-label{
					color: #666;
					margin-right: 20rpx;
					flex-shrink: 0;
					letter-spacing: 4rpx;
					font-size: 28rpx;
					text{
						letter-spacing: 64rpx;
					}
				}
				&.item-block{
					display: block;
					height: auto;
					padding: 30rpx 24rpx;
					.textarea{
						margin-top: 30rpx;
						background-color: #F5F5F5;
						border-radius: 10rpx;
						padding: 14rpx 20rpx;
					}
				}
			}
			.photo-url{
				border: 1px dashed #eee;
				width: 120rpx;
				height: 160rpx;
				position: relative;
				&:after{
					content: '立即上传';
					background: rgba(0,0,0,0.2);
					height: 100%;
					width: 100%;
					z-index: 2;
					position: absolute;
					left: 0;
					top: 0;
					color: #fff;
					font-size: 22rpx;
					text-align: center;
					line-height: 160rpx;
				}
			}
		}
		.logoff-btn{
			padding: 48rpx 100rpx;
		}
	}
</style>
